<template>
  <div>
    <el-select v-model="value" multiple filterable allow-create default-first-option :reserve-keyword="false"
               placeholder="Choose tags for your article" style="width: 240px" @change="clearSecondSelect(value)">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <br/>
    <el-select v-model="valueSecond" multiple filterable allow-create default-first-option :reserve-keyword="false"
               placeholder="Choose tags for your article" style="width: 240px">
      <el-option v-for="item in handleChange(value)" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
  </div>


</template>

<script lang="js" setup>
import {ref} from 'vue'

const value = ref([])
const valueSecond = ref([])
const options = [
  {
    label: '电子产品',
    value: '1',
  },
  {
    label: '生活用品',
    value: '2',
  },
  {
    label: '户外运动',
    value: '3',
  },
]
const optionsSecond = {
  '1': [
    {
      label: '平板电脑',
      value: '1-1',
    },
    {
      label: '笔记本电脑',
      value: '1-2',
    },
    {
      label: '手机',
      value: '1-3',
    },
  ],
  '2': [
    {
      label: '沐浴露',
      value: '2-1',
    },
    {
      label: '洗发水',
      value: '2-2',
    },
    {
      label: '牙膏',
      value: '2-3',
    },
  ],
  '3': [
    {
      label: '跑鞋',
      value: '3-1',
    },
    {
      label: '公路车',
      value: '3-2',
    },
    {
      label: '爬山',
      value: '3-3',
    },
  ],
}

function handleChange(value) {
  let options = [];
  for (let i = 0; i < value.length; i++) {
    options = options.concat(optionsSecond[value[i]]);
  }
  return options;
}

async function clearSecondSelect(value) {
  debugger;

  let options = handleChange(value);
  let label = options.map(item => item.value);

  // 更新listA为过滤后的数组
  valueSecond.value = valueSecond.value.filter(item => label.includes(item));
}
</script>